<html>

<head>
    <title>S Curve Report</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <style>
        .heading td {
            background: #1D9FDF;
            color: white;
            text-align: center;
            border: none;
        }

        .headere {
            background-color: lightgray;
        }

        #heading {
            text-align: center;
        }


        table {
            border-collapse: collapse;
        }

        td {
            border: 1px solid black;
            height: 30px;
            width: 280px;
            text-align: center;
            font-weight: bold;
        }

        .noBorder td {
            border: none;
            background: lightgray;
        }

        table thead {
            background: gray;
        }

        .reporttable {
            border-collapse: collapse;
        }
    </style>


    <script>
        var json = "";
        var district = "";
        var checkOuLevel = function (ou) {
            $.ajax({
                async: false,
                type: "GET",
                url: "../api/organisationUnits/" + ou + ".json",
                success: function (data) {
                    json = data;

                }
            });
            return json;
        };

        var checkDataset = function (ou) {
            var count = 0;
            $.ajax({
                async: false,
                type: "GET",
                url: "../api/organisationUnits/" + ou + ".json",
                success: function (data) {
                    //     json = data;


                    for (var p = 0; p < data.dataSets.length; p++) {
                        if (data.dataSets[p].id === "PFHKrQJxO85") {
                            count = 1;
                        }
                    }
                }
            });
            if (count == 1) { return 1; }
            else { return 0; }
            //     return 0;
        };

        var getPeriodArray = function (sm, em) {
            var array = "";
            sm = parseInt(sm);
            em = parseInt(em);
            //   var pem = em;
            while (em != sm || em > sm) {
                if (em == 201700) {
                    em = 201612;
                }
                if (em == 201800) {
                    em = 201712;
                }
                if (em == 201900) {
                    em = 201812;
                }
                array = array + em + ";";
                em -= 1;

            }
            //    array = array + ouPe;
            return array;
        };
        var month;
        var getMonth = function (aa) {
            var a = aa.substring(4, 6);
            var year = aa.substring(0, 4);
            if (a == "1" || a == "01") { month = "January" }
            if (a == "2" || a == "02") { month = "February" }
            if (a == "3" || a == "03") { month = "March" }
            if (a == "4" || a == "04") { month = "April" }
            if (a == "5" || a == "05") { month = "May" }
            if (a == "6" || a == "06") { month = "June" }
            if (a == "7" || a == "07") { month = "July" }
            if (a == "8" || a == "08") { month = "August" }
            if (a == "9" || a == "09") { month = "September" }
            if (a == "10") { month = "October" }
            if (a == "11") { month = "November" }
            if (a == "12") { month = "December" }
            if (a == "00") { month = "December" }
            return month + " " + year;
        };

        var getOus = function () {
            var repsonse;
            $.ajax({
                async: false,
                type: "GET",
                url: "../api/organisationUnits.json?level=4",
                success: function (data) {
                    response = data.organisationUnits;
                }
            });
            return response;
        };

        var getValueforMonth = function (aa) {
            var a = aa.split(" ");
            var b = a[0];
            var value;
            if (b == "January") { value = "01"; }
            if (b == "February") { value = "02"; }
            if (b == "March") { value = "03"; }
            if (b == "April") { value = "04"; }
            if (b == "May") { value = "05"; }
            if (b == "June") { value = "06"; }
            if (b == "July") { value = "07"; }
            if (b == "August") { value = "08"; }
            if (b == "September") { value = "09"; }
            if (b == "October") { value = "10"; }
            if (b == "November") { value = "11"; }
            if (b == "December") { value = "12"; }
            return a[1] + value;

        };
        var getFirstThreeColumn = function (ou) {
            $.ajax({
                async: false,
                type: "GET",
                url: "../api/organisationUnits/" + ou + ".json?fields=ancestors[id,name,level],displayName",
                success: function (data) {
                    for (var i = 0; i < data.ancestors.length; i++) {
                        if (data.ancestors[i].level == 2) {
                            district = data.ancestors[i].name;
                        }
                        if (data.ancestors[i].level == 3) {
                            sub = data.ancestors[i].name;
                        }
                        ncbc = data.displayName;

                    }

                }
            });
            return district, sub, ncbc;
        };
        var ouname = "";
        var getOuName = function (ou) {
            $.ajax({
                async: false,
                type: "GET",
                url: "../api/organisationUnits/" + ou + ".json?fields=displayName",
                success: function (data) {
                    ouname = data.displayName;
                }
            });
            return ouname;
        };

        $(document).ready(function () {
            var url = window.location.href;
            var ou1 = url.split("&")[1];
            var ou = ou1.split("=")[1];
            var ouLeveldata = checkOuLevel(ou);
            var ouLevel = ouLeveldata.level;
            var index = 1;
            //var ouLeveldata5 = checkOuLevel(ou);
            //var ouPeriod = ouLeveldata5.openingDate;
            //var ouPe1 = ouPeriod.split('T')[0];
            //var ouPe2 = ouPe1.split('-');
            //var ouPe = ouPe2[0] + ouPe2[1];


            $("#export").click(function (e) {
                e.preventDefault();

                //getting data from our table
                var data_type = 'data:application/vnd.ms-excel';
                var table_div = document.getElementById('report_table');
                var table_html = table_div.outerHTML.replace(/ /g, '%20');

                var a = document.createElement('a');
                a.href = data_type + ', ' + table_html;
                a.download = 'EMP Report.xls';
                a.click();
            });

            var getDataSingleOu = function (ouu) {
                var response;
                $.ajax({
                    async: false,
                    type: "GET",
                    dataType: "json",
                    contentType: "application/json",
                    url: "../api/26/analytics.json?dimension=pe:2017&dimension=dx:PBwwj18Kj4I;nQto4teC0cQ;SkWffXvOtNd&filter=ou:" + ouu + "&displayProperty=SHORTNAME&outputIdScheme=NAME",
                    success: function (data) {
                        response = data;

                    }
                });
                return response;
            };


            var dataValues = function (ouu, periodd) {
                var t = 0, rt = 0, a = 0;

                $.ajax({
                    async: false,
                    type: "GET",
                    dataType: "json",
                    contentType: "application/json",
                    url: "../api/dataValueSets.json?orgUnit=" + ouu + "&dataSet=v00or1wgms5&period=" + periodd,
                    success: function (data) {
                        //   debugger
                        var response = data.dataValues;
                        if (response == undefined || response == null || response == "") { }
                        else {
                            for (var e = 0; e < response.length; e++) {
                                if (response[e].dataElement == "DJjSjOmMlVz") {
                                    t = parseFloat(response[e].value);
                                }
                                if (response[e].dataElement == "iCXESu9LeCF") {
                                    rt = parseFloat(response[e].value);
                                }
                                if (response[e].dataElement == "QGESByVrGAd") {
                                    a = parseFloat(response[e].value);
                                }
                            }
                        }
                    }
                });
                return {
                    target: t,
                    revisedTarget: rt,
                    amount: a
                };
            };

            //  var periodArray = getPeriodArray(pe);

            var printData = function (ou, i) {
                var contractAmount = "";
                var startdate = "";
                var enddate = "";
                var data = getDataSingleOu(ou);
                // debugger

                for (var q = 0; q < data.rows.length; q++) {
                    if (data.rows[q][0] == "Basic information_Contract amount") {
                        contractAmount = Number(data.rows[q][2]);
                    }
                    if (data.rows[q][0] == "Basic information_Contract end date") {
                        enddate = data.rows[q][2];
                    }
                    if (data.rows[q][0] == "Basic information_Contract start date") {
                        startdate = data.rows[q][2];
                    }
                }
                debugger
                if (startdate == "" && enddate == "") {
                    alert("No details found");
                    return;
                }
                var ed1 = enddate.split('/');
                var ed = ed1[2] + ed1[1];
                var sd1 = startdate.split('/');
                var sd = sd1[2] + sd1[1];
                var periodArray = getPeriodArray(sd, ed);




                var row = "";
                getFirstThreeColumn(ou);
                var table = "<table class='reporttable_" + i + "' border='1'></table>";
                $(".tableattach").append(table);
                //name of ou
                var row = "<tr  bgcolor='lightgray'><td colspan= '1'>District :</td><td colspan='1'>" + district + "</td><td></td><td colspan='1'>Sub-project :</td><td colspan='1'>" + sub + "</td><td></td><td colspan='1'>Contract Name : </td><td colspan='1'>" + ncbc + "</td><td></td><td colspan='1'>Contract Amount : </td><td colspan='1'>" + contractAmount + "</td></tr>";

                //heading
                row = row + "<tr><td>S.no.</td><td>Period</td><td>Target</td><td>Revised Target</td><td>Achievement</td><td>Monthly Target</td><td>Monthly Revised Target</td><td>Monthly Achievement</td><td>Target amount</td><td>Revised Target amount</td><td>Achievement amount</td></tr>";
                var pmt = 0; pmrt = 0; pma = 0;
                var indexx = 1;
                var array = periodArray.split(";");
                for (var f = array.length - 2; f >= 0; f--) {
                    var t = 0, rt = 0, a = 0, mt = 0, mrt = 0, ma = 0, ta = 0, rta = 0, aa = 0;

                    var period = getMonth(array[f]);
                    var periodd = array[f];

                    var getValuess = dataValues(ou, periodd);
                    t = getValuess.target;
                    rt = getValuess.revisedTarget;
                    a = getValuess.amount;

                    if (t != 0) {
                        mt = ((t * contractAmount) / 100).toFixed(2);

                    }
                    if (rt != 0) {
                        mrt = ((rt * contractAmount) / 100).toFixed(2);

                    }
                    if (a != 0) {
                        ma = ((a * contractAmount) / 100).toFixed(2);

                    }

                    ta = (mt - pmt).toFixed(2);
                    rta = (mrt - pmrt).toFixed(2);
                    aa = (ma - pma).toFixed(2);
                    if (ta <= 0) {
                        ta = 0;
                    }

                    if (rta <= 0) {
                        rta = 0;
                    }
                    if (aa <= 0) {
                        aa = 0;
                    }

                    pmt = mt;
                    pmrt = mrt;
                    pma = ma;


                    if (t == 0 && rt == 0 && a == 0 && mt == 0 && mrt == 0 && ma == 0 && ta == 0 && rta == 0 && aa == 0) { }
                    else {
                        row = row + "<tr><td>" + indexx + "</td><td class='months'>" + period + "</td><td class='t'>" + t + "</td><td class='rt'>" + rt + "</td><td class='a'>" + a + "</td><td class='ta'>" + ta + "</td><td class='rta'>" + rta + "</td><td class='aa'>" + aa + "</td><td class='mt'>" + mt + "</td><td class='mrt'>" + mrt + "</td><td class='ma'>" + ma + "</td></tr>";
                        indexx++;
                    }
                }

                $(".reporttable_" + i).append(row);


            };
            var tcontractAmount = 0;

            var tperiodArray;

            var getContractTotal = function (ou) {

                $.ajax({
                    async: false,
                    type: "GET",
                    dataType: "json",
                    contentType: "application/json",
                    url: "../api/26/analytics.json?dimension=pe:2017&dimension=dx:PBwwj18Kj4I;nQto4teC0cQ;SkWffXvOtNd&filter=ou:" + ou + "&displayProperty=SHORTNAME&outputIdScheme=NAME",
                    success: function (data) {

                        for (var q = 0; q < data.rows.length; q++) {
                            if (data.rows[q][0] == "Basic information_Contract amount") {
                                console.log(data.rows[q][2]);
                                tcontractAmount += Number(data.rows[q][2]);
                            }
                        }
                        document.getElementById("tca").innerHTML = tcontractAmount;
                    }
                });
            };



            var printTable = function () {
                var ed = "201901";
                var sd = "201609";
                var periodArray = getPeriodArray(sd, ed);
                var array = periodArray.split(";");
                var row = "";
                var indexx = 1;
                var table = "<table class='reporttable' border='1'></table>";
                $(".tableattach").append(table);
                //heading
                row = row + "<tr class='headere'><td colspan='2'>Organisation Unit</td><td colspan='3'>EEAP/DRILP-III</td><td colspan='3'>Total Contract Amount</td><td colspan='3' id='tca'></td></tr>";
                row = row + "<tr><td>S.no.</td><td>Period</td><td>Target</td><td>Revised Target</td><td>Achievement</td><td>Monthly Target</td><td>Monthly Revised Target</td><td>Monthly Achievement</td><td>Target amount</td><td>Revised Target amount</td><td>Achievement amount</td></tr>";
                for (var i = array.length - 2; i >= 0; i--) {
                    var periodName = getMonth(array[i]);

                    row = row + "<tr class='rows'><td id='" + indexx + "' class='values indexx'>" + indexx + "</td><td id='" + array[i] + "_col2' class='values months'>" + periodName + "</td><td id='" + array[i] + "_col3' class='values t'></td><td id='" + array[i] + "_col4' class='values rt'></td><td id='" + array[i] + "_col5' class='values a'></td><td id='" + array[i] + "_col6' class='values mt'></td><td id='" + array[i] + "_col7' class='values mrt'></td><td id='" + array[i] + "_col8' class='values ma'></td><td id='" + array[i] + "_col9' class='values ta'></td><td id='" + array[i] + "_col10' class='values rta'></td><td id='" + array[i] + "_col11' class='values aa'></td></tr>";
                    indexx++;
                }
                $(".reporttable").append(row);
            };

            var formatTable = function () {
                var rows = document.getElementsByClassName('rows');
                var p = 0;
                while (p != rows.length) {
                    if (rows[p].childNodes[2].innerHTML == "" && rows[p].childNodes[3].innerHTML == "" && rows[p].childNodes[4].innerHTML == "" && rows[p].childNodes[5].innerHTML == "" && rows[p].childNodes[6].innerHTML == "" && rows[p].childNodes[7].innerHTML == "" && rows[p].childNodes[8].innerHTML == "" && rows[p].childNodes[9].innerHTML == "" && rows[p].childNodes[10].innerHTML == "") {
                        $(rows[p]).remove();
                        p = 0;
                    }
                    else {
                        p++
                    }

                }
                var rows = document.getElementsByClassName('indexx');
                var i = 1;
                for (var l = 0; l < rows.length; l++) {
                    rows[l].innerHTML = i;
                    i++;
                }
                debugger
            };
            var isNaN = function (value) {
                return Number.isNaN(Number(value));
            }
            var arrayT1 = [];
            var arrayT2 = [];
            var arrayT3 = [];
            var a1 = 0, aa1 = 0, aaa1 = 0;


            var replaceFirstThreeCol = function () {
                var tds1 = document.getElementsByClassName("ta");
                var tds2 = document.getElementsByClassName("rta");
                var tds3 = document.getElementsByClassName("aa");
                for (var c = 0; c < tds1.length; c++) {
                    var value1 = parseFloat(tds1[c].innerHTML);
                    var value2 = parseFloat(tds2[c].innerHTML);
                    var value3 = parseFloat(tds3[c].innerHTML);
                    arrayT1[a1] = parseFloat((value1 / tcontractAmount) * 100).toFixed(2);
                    a1++;

                    arrayT2[aa1] = parseFloat((value2 / tcontractAmount) * 100).toFixed(2);
                    aa1++;

                    arrayT3[aaa1] = parseFloat((value3 / tcontractAmount) * 100).toFixed(2);
                    aaa1++;
                }

                var tdss1 = document.getElementsByClassName("t");
                var tdss2 = document.getElementsByClassName("rt");
                var tdss3 = document.getElementsByClassName("a");
                for (var cc = 0; cc < tdss1.length; cc++) {
                    tdss1[cc].innerHTML = arrayT1[cc];
                    tdss2[cc].innerHTML = arrayT2[cc];
                    tdss3[cc].innerHTML = arrayT3[cc];
                }
            };

            var replace9thcol = function () {
                var tds = document.getElementsByClassName("ta");
                var tds2 = document.getElementsByClassName("mt");

                var tdss = document.getElementsByClassName("rta");
                var tdss2 = document.getElementsByClassName("mrt");

                var tdsss = document.getElementsByClassName("aa");
                var tdsss2 = document.getElementsByClassName("ma");

                for (var g = 0; g < tds.length; g++) {
                    if (g > 0) {

                        tds[g].innerHTML = (parseFloat(tds2[g].innerHTML) + parseFloat(tds[g - 1].innerHTML)).toFixed(2);
                        tdss[g].innerHTML = (parseFloat(tdss2[g].innerHTML) + parseFloat(tdss[g - 1].innerHTML)).toFixed(2);
                        if (tdsss[g].innerHTML > 1 && tdsss[g].innerHTML != 0) {
                            tdsss[g].innerHTML = (parseFloat(tdsss2[g].innerHTML) + parseFloat(tdsss[g - 1].innerHTML)).toFixed(2);
                        }
                    }
                }
            };

            var printValues = function (ou) {

                var ed = "201901";
                var sd = "201606";
                camount = 0;
                var periodArray = getPeriodArray(sd, ed);

                var data2 = getDataSingleOu(ou);

                for (var p = 0; p < data2.rows.length; p++) {

                    if (data2.rows[p][0] == "Basic information_Contract amount") {
                        camount = Number(data2.rows[p][2]);
                    }
                    if (data2.rows[p][0] == "Basic information_Contract end date") {
                        enddate = data2.rows[p][2];
                    }
                    if (data2.rows[p][0] == "Basic information_Contract start date") {
                        startdate = data2.rows[p][2];
                    }
                }
                debugger
                if (startdate == "" && enddate == "") {
                    //   alert("No details found");
                    return;
                }
                else {


                    var row = "";
                    var pmt = 0, pmrt = 0, pma = 0;
                    var indexx = 1;
                    var array = periodArray.split(";");
                    for (var f = array.length - 2; f >= 0; f--) {
                        var t = 0, rt = 0, a = 0, mt = 0, mrt = 0, ma = 0, ta = 0, rta = 0, aa = 0;
                        var period = getMonth(array[f]);
                        var periodd = array[f];

                        //  var getValuess = dataValues(ou, periodd);
                        //  t = getValuess.target;
                        //  rt = getValuess.revisedTarget;
                        //  a = getValuess.amount;

                        var t = 0, rt = 0, a = 0;

                        $.ajax({
                            async: false,
                            type: "GET",
                            dataType: "json",
                            contentType: "application/json",
                            url: "../api/dataValueSets.json?orgUnit=" + ouu + "&dataSet=v00or1wgms5&period=" + periodd,
                            success: function (data) {
                                //   debugger
                                var response = data.dataValues;
                                if (response == undefined || response == null || response == "") { }
                                else {
                                    for (var e = 0; e < response.length; e++) {
                                        if (response[e].dataElement == "DJjSjOmMlVz") {
                                            t = parseFloat(response[e].value);
                                        }
                                        if (response[e].dataElement == "iCXESu9LeCF") {
                                            rt = parseFloat(response[e].value);
                                        }
                                        if (response[e].dataElement == "QGESByVrGAd") {
                                            a = parseFloat(response[e].value);
                                        }
                                    }
                                }

                                //console.log(t +" " + rt + " " + a);

                                //1st three column


                                if (t != 0) {
                                    ta = parseFloat((t * camount) / 100);
                                }
                                if (rt != 0) {
                                    rta = parseFloat((rt * camount) / 100);
                                }
                                if (a != 0) {
                                    aa = parseFloat((a * camount) / 100);

                                }



                                //amount
                                mt = parseFloat(ta - pmt);
                                mrt = parseFloat(rta - pmrt);
                                ma = parseFloat(aa - pma);
                                if (mt <= 0) {
                                    mt = 0;
                                }

                                if (mrt <= 0) {
                                    mrt = 0;
                                }
                                if (ma <= 0) {
                                    ma = 0;
                                }

                                pmt = ta;
                                pmrt = rta;
                                pma = aa;

                                if (t == 0 && rt == 0 && a == 0 && mt == 0 && mrt == 0 && ma == 0 && ta == 0 && rta == 0 && aa == 0) { }
                                else {
                                    var tds = document.getElementsByClassName("values");
                                    for (var j = 0; j < tds.length; j++) {
                                        var idd = tds[j].id;
                                        var id = idd.split('_')[0];
                                        var col = idd.split('_')[1];

                                        if (id == array[f] && col == "col3") {
                                            var value = parseFloat(tds[j].innerHTML);
                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(t)).toFixed(2);

                                        }

                                        else if (id == array[f] && col == "col4") {
                                            var value = parseFloat(tds[j].innerHTML);
                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(rt)).toFixed(2);

                                        }
                                        else if (id == array[f] && col == "col5") {
                                            var value = parseFloat(tds[j].innerHTML);
                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(a)).toFixed(2);

                                        }

                                        else if (id == array[f] && col == "col6") {
                                            var value = parseFloat(tds[j].innerHTML);

                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(mt)).toFixed(2);
                                        }

                                        else if (id == array[f] && col == "col7") {
                                            var value = parseFloat(tds[j].innerHTML);
                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(mrt)).toFixed(2);
                                            if (array[f] == "201610" || array[f] == "201611") {
                                                console.log(tds[j].innerHTML + " - " + array[f]);
                                            }

                                        }

                                        else if (id == array[f] && col == "col8") {
                                            var value = parseFloat(tds[j].innerHTML);
                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(ma)).toFixed(2);

                                        }

                                        else if (id == array[f] && col == "col9") {
                                            var value = parseFloat(tds[j].innerHTML);
                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(ta)).toFixed(2);

                                        }

                                        else if (id == array[f] && col == "col10") {
                                            var value = parseFloat(tds[j].innerHTML);
                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(rta)).toFixed(2);

                                        }

                                        else if (id == array[f] && col == "col11") {
                                            var value = parseFloat(tds[j].innerHTML);
                                            var check = isNaN(value);
                                            if (value === "" || check === true) {
                                                value = 0.0;
                                            }
                                            tds[j].innerHTML = (value + parseFloat(aa)).toFixed(2);

                                        }

                                    }

                                }
                            }
                        });

                    }
                }
            };

            var createChart1 = function (ou) {
                //  var ouname = getOuName(ou);
                var ouname = getOuName(ou);
                var tdVals1 = document.getElementsByClassName("t");
                var tdVals2 = document.getElementsByClassName("rt");
                var tdVals3 = document.getElementsByClassName("a");
                var tdValue1 = [];
                var tdValue2 = [];
                var tdValue3 = [];
                tdValue1[0] = 0;
                tdValue2[0] = 0;
                tdValue3[0] = 0;
                var u = 1, v = 1;
                for (var k = 0; k < tdVals1.length; k++) {
                    tdValue1[u] = parseInt(tdVals1[k].innerHTML);
                    tdValue2[u] = parseInt(tdVals2[k].innerHTML);
                    if (parseInt(tdVals3[k].innerHTML) == 0) {
                        tdValue3[u] = 'null';
                    }
                    else {
                        tdValue3[u] = parseInt(tdVals3[k].innerHTML);
                    }
                    u++;
                }
                var periods1 = document.getElementsByClassName("months");
                var periods = [];
                for (var l = 0; l < periods1.length; l++) {
                    periods[v] = periods1[l].innerHTML;
                    v++;
                }
                var getValue = getValueforMonth(periods[1]);
                var getValue2 = parseInt(getValue) - 1;
                var getValue3 = getValue2.toString();
                periods[0] = getMonth(getValue3);

                Highcharts.chart('container2', {

                    title: {
                        text: 'S Curve Compiled Monthly'
                    },

                    subtitle: {
                        text: ouname
                    },

                    yAxis: {
                        title: {
                            text: 'Values'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },

                    xAxis: {

                        categories: periods,
                        title: {
                            text: 'Period',
                        }
                    },

                    series: [{
                        name: 'Target',
                        data: tdValue1,
                    },
                    {
                        name: 'Revised Target',
                        data: tdValue2,
                    },
                    {
                        name: 'Achievement',
                        data: tdValue3,
                    }]

                });

            };

            var createChart2 = function (ou) {
                var ouname = getOuName(ou);
                var tdVals1 = document.getElementsByClassName("mt");
                var tdVals2 = document.getElementsByClassName("mrt");
                var tdVals3 = document.getElementsByClassName("ma");
                var tdValue1 = [];
                var tdValue2 = [];
                var tdValue3 = [];
                tdValue1[0] = 0;
                tdValue2[0] = 0;
                tdValue3[0] = 0;
                var u = 1, v = 1;
                for (var k = 0; k < tdVals1.length; k++) {
                    tdValue1[u] = parseInt(tdVals1[k].innerHTML);
                    tdValue2[u] = parseInt(tdVals2[k].innerHTML);
                    if (parseInt(tdVals3[k].innerHTML) == 0) {
                        tdValue3[u] = 'null';
                    }
                    else {
                        tdValue3[u] = parseInt(tdVals3[k].innerHTML);
                    }
                    u++;
                }
                var periods1 = document.getElementsByClassName("months");
                var periods = [];
                for (var l = 0; l < periods1.length; l++) {
                    periods[v] = periods1[l].innerHTML;
                    v++;
                }
                var getValue = getValueforMonth(periods[1]);
                var getValue2 = parseInt(getValue) - 1;
                var getValue3 = getValue2.toString();
                periods[0] = getMonth(getValue3);

                Highcharts.chart('container2', {

                    title: {
                        text: 'S Curve Compiled Monthly'
                    },

                    subtitle: {
                        text: ouname
                    },

                    yAxis: {
                        title: {
                            text: 'Values'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },

                    xAxis: {

                        categories: periods,
                        title: {
                            text: 'Period',
                        }
                    },

                    series: [{
                        name: 'Monthly Target',
                        data: tdValue1,
                    },
                    {
                        name: 'Monthly Revised Target',
                        data: tdValue2,
                    },
                    {
                        name: 'Monthly Achievement',
                        data: tdValue3,
                    }]

                });

            };
            var createChart3 = function (ou) {
                var ouname = getOuName(ou);
                var tdVals1 = document.getElementsByClassName("ta");
                var tdVals2 = document.getElementsByClassName("rta");
                var tdVals3 = document.getElementsByClassName("aa");
                var tdValue1 = [];
                var tdValue2 = [];
                var tdValue3 = [];
                tdValue1[0] = 0;
                tdValue2[0] = 0;
                tdValue3[0] = 0;
                var u = 1, v = 1;
                for (var k = 0; k < tdVals1.length; k++) {
                    tdValue1[u] = parseInt(tdVals1[k].innerHTML);
                    tdValue2[u] = parseInt(tdVals2[k].innerHTML);
                    if (parseInt(tdVals3[k].innerHTML) == 0) {
                        tdValue3[u] = 'null';
                    }
                    else {
                        tdValue3[u] = parseInt(tdVals3[k].innerHTML);
                    }
                    u++;
                }
                var periods1 = document.getElementsByClassName("months");
                var periods = [];
                for (var l = 0; l < periods1.length; l++) {
                    periods[v] = periods1[l].innerHTML;
                    v++;
                }
                var getValue = getValueforMonth(periods[1]);
                var getValue2 = parseInt(getValue) - 1;
                var getValue3 = getValue2.toString();
                periods[0] = getMonth(getValue3);

                Highcharts.chart('container3', {

                    title: {
                        text: 'S Curve Compiled Monthly'
                    },

                    subtitle: {
                        text: ouname
                    },

                    yAxis: {
                        title: {
                            text: 'Values'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },

                    xAxis: {

                        categories: periods,
                        title: {
                            text: 'Period',
                        }
                    },

                    series: [{
                        name: 'Target Amount',
                        data: tdValue1,

                    },
                    {
                        name: 'Revised Target Amount',
                        data: tdValue2,
                    },
                    {
                        name: 'Achievement Amount',
                        data: tdValue3,
                    }]

                });

            };

            var createChart11 = function (ou) {
                var ouname = getOuName(ou);
                var tdVals1 = document.getElementsByClassName("t");
                var tdVals2 = document.getElementsByClassName("rt");
                var tdVals3 = document.getElementsByClassName("a");
                var tdValue1 = [];
                var tdValue2 = [];
                var tdValue3 = [];
                tdValue1[0] = 0;
                tdValue2[0] = 0;
                tdValue3[0] = 0;
                var u = 1, v = 1;
                for (var k = 0; k < tdVals1.length; k++) {
                    tdValue1[u] = parseInt(tdVals1[k].innerHTML);
                    tdValue2[u] = parseInt(tdVals2[k].innerHTML);
                    if (parseInt(tdVals3[k].innerHTML) == 0) {
                        tdValue3[u] = 'null';
                    }
                    else {
                        tdValue3[u] = parseInt(tdVals3[k].innerHTML);
                    }
                    u++;
                }
                var periods1 = document.getElementsByClassName("months");
                var periods = [];
                for (var l = 0; l < periods1.length; l++) {
                    periods[v] = periods1[l].innerHTML;
                    v++;
                }
                var getValue = getValueforMonth(periods[1]);
                var getValue2 = parseInt(getValue) - 1;
                var getValue3 = getValue2.toString();
                periods[0] = getMonth(getValue3);

                Highcharts.chart('container2', {

                    title: {
                        text: 'S Curve Compiled Monthly'
                    },

                    subtitle: {
                        text: ouname
                    },

                    yAxis: {
                        title: {
                            text: 'Values'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },

                    xAxis: {
                        categories: periods,
                        title: {
                            text: 'Period',
                        }
                    },

                    series: [{
                        name: 'Target',
                        data: tdValue1,
                    },
                    {
                        name: 'Revised Target',
                        data: tdValue2,
                    },
                    {
                        name: 'Achievement',
                        data: tdValue3,
                    }]

                });
            };

            var createChart22 = function (ou) {
                var ouname = getOuName(ou);
                var tdVals1 = document.getElementsByClassName("mt");
                var tdVals2 = document.getElementsByClassName("mrt");
                var tdVals3 = document.getElementsByClassName("ma");
                var tdValue1 = [];
                var tdValue2 = [];
                var tdValue3 = [];
                tdValue1[0] = 0;
                tdValue2[0] = 0;
                tdValue3[0] = 0;
                var u = 1, v = 1;
                for (var k = 0; k < tdVals1.length; k++) {
                    tdValue1[u] = parseInt(tdVals1[k].innerHTML);
                    tdValue2[u] = parseInt(tdVals2[k].innerHTML);
                    if (parseInt(tdVals3[k].innerHTML) == 0) {
                        tdValue3[u] = 'null';
                    }
                    else {
                        tdValue3[u] = parseInt(tdVals3[k].innerHTML);
                    }
                    u++;
                }
                var periods1 = document.getElementsByClassName("months");
                var periods = [];
                for (var l = 0; l < periods1.length; l++) {
                    periods[v] = periods1[l].innerHTML;
                    v++;
                }
                var getValue = getValueforMonth(periods[1]);
                var getValue2 = parseInt(getValue) - 1;
                var getValue3 = getValue2.toString();
                periods[0] = getMonth(getValue3);

                Highcharts.chart('container2', {

                    title: {
                        text: 'S Curve Compiled Monthly'
                    },

                    subtitle: {
                        text: ouname
                    },

                    yAxis: {
                        title: {
                            text: 'Values'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },

                    xAxis: {
                        categories: periods,
                        title: {
                            text: 'Period',
                        }
                    },

                    series: [{
                        name: 'Monthly Target',
                        data: tdValue1,
                    },
                    {
                        name: 'Monthly Revised Target',
                        data: tdValue2,
                    },
                    {
                        name: 'Monthly Achievement',
                        data: tdValue3,
                    }]

                });

            };
            var createChart33 = function (ou) {
                var ouname = getOuName(ou);
                var tdVals1 = document.getElementsByClassName("ta");
                var tdVals2 = document.getElementsByClassName("rta");
                var tdVals3 = document.getElementsByClassName("aa");
                var tdValue1 = [];
                var tdValue2 = [];
                var tdValue3 = [];
                tdValue1[0] = 0;
                tdValue2[0] = 0;
                tdValue3[0] = 0;
                var u = 1, v = 1;
                for (var k = 0; k < tdVals1.length; k++) {
                    tdValue1[u] = parseInt(tdVals1[k].innerHTML);
                    tdValue2[u] = parseInt(tdVals2[k].innerHTML);
                    if (parseInt(tdVals3[k].innerHTML) == 0) {
                        tdValue3[u] = 'null';
                    }
                    else {
                        tdValue3[u] = parseInt(tdVals3[k].innerHTML);
                    }
                    u++;
                }
                var periods1 = document.getElementsByClassName("months");
                var periods = [];
                for (var l = 0; l < periods1.length; l++) {
                    periods[v] = periods1[l].innerHTML;
                    v++;
                }
                var getValue = getValueforMonth(periods[1]);
                var getValue2 = parseInt(getValue) - 1;
                var getValue3 = getValue2.toString();
                periods[0] = getMonth(getValue3);

                Highcharts.chart('container3', {

                    title: {
                        text: 'S Curve Compiled Monthly'
                    },

                    subtitle: {
                        text: ouname
                    },

                    yAxis: {
                        title: {
                            text: 'Values'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },

                    xAxis: {

                        categories: periods,
                        title: {
                            text: 'Period',
                        }
                    },

                    series: [{
                        name: 'Target Amount',
                        data: tdValue1,
                    },
                    {
                        name: 'Revised Target Amount',
                        data: tdValue2,
                    },
                    {
                        name: 'Achievement Amount',
                        data: tdValue3,
                    }]

                });

            };

            if (ouLevel == 1) {
                printTable();
                var repsonse = getOus();
                for (var p = 0; p < response.length; p++) {
                    var ouu = response[p].id;
                    getContractTotal(ouu);
                    printValues(ouu);
                }
                formatTable();
                replace9thcol();
                replaceFirstThreeCol();

                createChart1(ou);
                // 
            }
            else if (ouLevel == 2) {

                alert("Wrong Selection !");
            }
            else if (ouLevel == 3) {
                alert("Wrong Selection !");
            }
            else if (ouLevel == 4) {
                printData(ou);
                createChart11(ou);
                //createChart22(ouLeveldata.id);
                //createChart33(ouLeveldata.id);
            }


        });
    </script>
</head>

<body>

    <div id="body">
        <button id="export">Export to Excel</button>
        <br>
        <br>
        <table class="table table-bordered" width="100%">
            <thead>
                <tr class="heading">
                    <td colspan="1" rowspan="3">
                        <img src="../dhis-web-commons/security/DRILP_Logo.jpg" width="90%" height="400%">
                    </td>
                    <td colspan="4" rowspan="1">
                        <p style="font-size:16px; ">Earthquake Emergency Assistance Project (EEAP)</p>
                    </td>
                    <td colspan="1" rowspan="3"></td>
                </tr>
                <tr class="heading">
                    <td colspan="4" rowspan="1">
                        <p style="font-size:20px; ">Rehabilitation and Reconstruction of District Roads</p>
                    </td>
                </tr>
                <tr class="heading">
                    <td colspan="4" rowspan="1">
                        <p style="font-size:16px; ">S Curve Report</p>
                    </td>
                </tr>
            </thead>
        </table>
        <table id="report_table" class="tableattach"></table>
        <br>

        <div id="container1"></div>
        <div id="container2"></div>
        <div id="container3"></div>
    </div>
</body>

</html>